<template>
	<div>
		<div class="login" :style="{ bottom: show ? 0 : `-236px`, transform: `translateY(-${loginMove}px)` }">
			<div v-show="!show">
				<!-- <div class="login4" style="margin-bottom: 0; margin-top: 26px;">{{ $t('login5') }}<img class="img" src="https://static.inclusionconf.com/static/images/agenda-right-wap.png" alt=""></div> -->
				<!-- #ifdef MP-WEIXIN -->
				<button class="login4" style="margin-bottom: 0; margin-top: 26px;" type="default" v-if="!checked" @click="errorTips">微信授权登录</button>
				<button class="login4" style="margin-bottom: 0; margin-top: 26px;" type="default" v-else open-type="getPhoneNumber" @getphonenumber="weChatLogin">微信授权登录</button>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<button class="login4" style="margin-bottom: 0; margin-top: 26px;" type="default" v-if="!checked" @click="errorTips">支付宝授权登录</button>
				<button class="login4" style="margin-bottom: 0; margin-top: 26px;" type="default" v-else open-type="getPhoneNumber" @getphonenumber="alipayLogin">支付宝授权登录</button>
				<!-- #endif -->
				<div class="login3" @click="checked = !checked">
					<view class="span check" :class="checked ? 'checked' : ''"></view>
					{{ $t('login.index.357394-0') }}
					<view class="span login3-1" @click.stop="() => $refs.gzZcRef.getGz()">{{ $t('login.index.357394-1') }}</view>
					{{ $t('login.index.357394-2') }}
					<view class="span login3-1" @click.stop="$refs.gzZcRef.getGz('privacy_rule')">{{ $t('login.index.357394-3') }}</view>
				</div>
			</div>
		</div>
		<pub-zc-gz ref="gzZcRef" @close="zcAgreeHandle" />
	</div>
</template>

<script>
	import protal from "@/api/protal"
	import JSEncrypt from '../../static/jsencrypt.min.js'
	import PubZcGz from '@/components/pub-zc-gz.vue'


	export default {
		components: {
			PubZcGz
		},
		data() {
			return {
				phoneCnyCode: '86',
				phone: '',
				yzm: '',
				show: false,
				showSeconds: false,
				seconds: 59,
				encryptStr: '',
				timestamp: '',
				checked: false,
				loginMove: 0
			}
		},
		watch: {
			show(v) {
				if (v) {
					// this.pageView('waitanh5_inletPage')
				}
			}
		},
		onShow() {
			if (this.getDeviceType() === 'ios') {
				window.addEventListener('focusin', e => {
					const st = document.documentElement.scrollTop || document.body.scrollTop
					clearTimeout(this.timer1)
					clearTimeout(this.timer2)

					this.timer1 = setTimeout(() => {
						const st1 = document.documentElement.scrollTop || document.body.scrollTop
						if (st == st1) {
							this.loginMove = 300
						}
					}, 500)
				})
				window.addEventListener('focusout', e => {
					this.timer2 = setTimeout(() => {
						this.loginMove = 0
					}, 100)
				})
			}
		},
		methods: {
			errorTips() {
				uni.showToast({
					icon: 'error',
					title: this.En ? 'Please read and agreed  the "Conference User Service Agreement" and the "Privacy Policy" first.' : '请先阅读并同意《大会用户协议》和《隐私政策》'
				})
			},
			weChatLogin(v) {
				protal.weChatLogin(v.detail.code).then(res => {
					this.yzmSubmit(res)
				})
			},
			alipayLogin(v) {
				console.log(v, '登录')
				const params = {
					"response": v.detail.encryptedData,
					"sign": v.detail.sign
				}
				protal.alipayLogin(params).then(res => {
					this.yzmSubmit(res)
				})
			},
			// 判断当前设备是安卓还是iOS
			getDeviceType() {
				var userAgent = navigator.userAgent.toLowerCase();
				if (userAgent.indexOf("android") != -1) {
					return "android";
				} else if (/(iphone|ipad|ipod|ios)/i.test(userAgent)) {
					return "ios";
				} else {
					return "unknown";
				}
			},
			showFn() {
				this.show = true
				this.jsAPI('waitanh5_inletClick')
			},
			toSign() {
				// this.jsAPI('waitanh5_registerClick')
				location.href = location.origin + '/wap/'
			},
			zcAgreeHandle(t) {
				this.checked = true
			},
			yzmSubmit(res) { // 手机验证码登录
				if (res.data.loginRes && res.data.loginRes.token) {
					uni.setStorageSync('token', res.data.loginRes.token)
					uni.setStorageSync('showWebcome', '1')
					this.$store.commit('setRefreshState', new Date().getTime())
					return
				}
				if (res.data.name && res.data.identityCard) {
					uni.navigateTo({
						url: `/pages/login/history?name=${ res.data.name }&identityType=${ res.data.identityType }&identityCard=${ res.data.identityCard }&phone=${ res.data.phone }&phoneCnyCode=${ res.data.phoneCnyCode }&authCode=${ res.data.authCode }`
					})
				} else {
					uni.navigateTo({
						url: `/pages/login/real?phone=${ res.data.phone }&phoneCnyCode=${ res.data.phoneCnyCode }&authCode=${ res.data.authCode }`
					})
				}
			},
			desSeconds() {
				this.showSeconds = true
				const timer = setInterval(() => {
					if (this.seconds === 1) {
						this.showSeconds = false
						clearInterval(timer)
						this.seconds = 59
					}
					this.seconds -= 1
				}, 1000)
			},
			async getSmsCode() {
				if (!this.phone) return
				await this.getTimestamp()
				this.getCrypt()
				const params = {
					mobile: this.phone,
					phoneCnyCode: this.phoneCnyCode,
					encryptionMsg: this.encryptStr,
					sendType: 'register'
				}
				protal.getSmsCode(params).then(res => {
					if (res.code === '0000') {
						this.desSeconds()
					}
				}).catch(err => {
					if (err.code === '10023') { // 未注册  跳转注册页面
						this.$confirm('', this.$t('noSign'), {
							center: true,
							confirmButtonClass: 'pub-btn btn-big btn100',
							cancelButtonClass: 'pub-btn btn-small btn100',
							customClass: 'el-message-box400',
							confirmButtonText: this.$t('login9'),
							cancelButtonText: this.$t('secdetail3'),
							showClose: false,
							beforeClose: (action, instance, done) => {
								if (action == 'confirm') {
									done()
									location.href = location.origin + '/wap/'
								} else {
									done()
								}
							}
						})
					}
				})
			},
			getTimestamp() {
				return protal.getTimestamp().then(res => {
					if (res.code === '0000') {
						this.timestamp = res.data
					}
				})
			},
			getCrypt() {
				var str = this.phone + '&#&' + this.timestamp;
				// 公钥
				var publicKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCCyuMRsaJXsRs/IhUBsQeVU87qpa/ndLmSE0zkEq48K7ADmk/5jlwpP/FLXNn6xCexGOp1MOeSEmOEa6OrLrxS3UI+U8e/dJNoj+QAe2fQPMi73mZQv497P0Q2WaVeW6PSkuaTRSMDJCN2S8c/y+Y+5VmaX6uNOA48uSI/WpXAzwIDAQAB";
				// 加密
				var encrypt = new JSEncrypt();
				encrypt.setPublicKey(publicKey);
				var encryptStr = encrypt.encrypt(str);
				this.encryptStr = encryptStr
			},
		}
	}
</script>

<style lang="less" scoped>
	.login {
		position: fixed;
		left: 0;
		bottom: -256px;
		z-index: 9;
		width: 100%;
		height: 350px;
		background: #FFFFFF;
		box-shadow: 0px 0 20px 0px rgba(0, 0, 50, 0.2);
		border-radius: 16px 16px 0px 0px;
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		transition: 0.3s linear;

		.menu-lang-en {
			position: absolute;
			right: 18px;
			top: 12px;
			width: 30px;
			color: #fff;
		}

		.menu-lang {
			position: absolute;
			right: 18px;
			top: 16px;
			font-size: 20px;
			color: #000;
			line-height: 1;
			font-family: inClusionFont;
		}

		.login-top {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 24px;
		}

		&::before {
			content: "";
			width: 100px;
			height: 6px;
			background: #0A0F1A;
			border-radius: 4px;
			opacity: 0.1;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 10px;
		}

		.login1 {
			padding-top: 40px;
			font-family: AlibabaPuHuiTi_2_85_Bold;
			font-size: 24px;
			color: #000000;
			line-height: 24px;
			letter-spacing: 1px;
			text-align: center;
			font-style: normal;
			margin-bottom: 24px;
		}

		.login2 {
			width: 638rpx;
			margin: 0 auto 14px;
			display: flex;
			align-items: center;
			height: 44px;
			border-radius: 22px;
			border: 1px solid #E0E0E0;
			overflow: hidden;

			&>.uni-easyinput__content-input {
				flex: 1;
			}

			/deep/ .uni-easyinput__content-input {
				border: none !important;
				font-family: AppleSystemUIFont;
				font-size: 15px;
				color: #000000;
				line-height: 20px;
				text-align: left;
				font-style: normal;
			}

			.prev {
				display: flex;
				align-items: center;
				flex: 0 0 74px;

				.uni-easyinput__content-input {
					font-family: AlibabaPuHuiTi_3_45_Light !important;
					font-size: 15px !important;
					color: #000000;
					line-height: 20px !important;
					text-align: left;
					font-style: normal;
				}
			}

			/deep/ .el-input-group__prepend {
				display: inline-flex;
				flex: 0 0 74px;
				border: none !important;
				background: none;
				padding-left: 12px;
				position: relative;

				span {
					font-family: AppleSystemUIFont;
					font-size: 15px;
					color: #000000;
					line-height: 20px;
					text-align: left;
					font-style: normal;
				}

				.uni-easyinput__content-input {
					padding: 0;
					font-size: 15px;
					color: #000000;
					line-height: 20px;
				}

				&::after {
					content: "";
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 1px;
					height: 16px;
					background: #E3E3E3;
				}
			}

			/deep/ .el-input-group__append {
				padding: 0;
				flex: 0 0 94px;
				height: 38px;
				border-radius: 19px;
				transform: translateX(-3px);
				display: inline-flex;
				justify-content: center;
				align-items: center;
				border: none;

				.append {
					font-family: AppleSystemUIFont;
					font-size: 13px;
					line-height: 15px;
					text-align: center;
					font-style: normal;
					width: 100%;
					height: 100%;

					span {
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 19px;
						background: #EBEBEB;
						color: #999999;

						&.active {
							background: #19234B;
							color: #fff;
							cursor: pointer;
						}
					}
				}
			}
		}

		.login3 {
			width: 638rpx;
			margin: 0 auto 14px;
			font-family: AlibabaPuHuiTi_3_45_Light;
			font-size: 12px;
			color: #181818;
			line-height: 19px;
			height: 19px;
			text-align: left;
			font-style: normal;

			.span {
				display: inline-block;
				margin-right: 4px;
				transform: translateY(1px);
			}

			.check {
				width: 14px;
				height: 14px;
				border-radius: 50%;
				border: 1px solid RGBA(153, 153, 153, 1);
				display: inline-block;
				transform: translateY(2px);
				position: relative;
				z-index: 1;

				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					width: 200%;
					height: 20px;
				}

				&.checked {
					border-color: #7C5CFF;
					background: #7C5CFF;
					position: relative;

					&::after {
						content: "";
						box-sizing: content-box;
						border: 1px solid #FFF;
						border-left: 0;
						border-top: 0;
						height: 7px;
						left: 4px;
						position: absolute;
						top: 1px;
						transform: rotate(45deg);
						width: 3px;
						transition: -webkit-transform .15s ease-in .05s;
						transition: transform .15s ease-in .05s;
						transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
						transform-origin: center;
					}
				}
			}

			.login3-1 {
				color: rgba(23, 57, 214, 1);
			}
		}

		.login4 {
			width: 638rpx;
			margin: 34px auto 14px;
			height: 40px;
			border-radius: 20px;
			background: #784DFF;
			font-family: AlibabaPuHuiTi_3_65_Medium;
			font-size: 16px;
			color: #FFFFFF;
			line-height: 16px;
			font-style: normal;
			display: flex;
			align-items: center;
			justify-content: center;

			.img {
				width: 14px;
				height: 14px;
				margin-left: 6px;
			}

			&.disabled {
				opacity: 0.5;
			}
		}

		.login5 {
			width: 638rpx;
			margin: 0 auto 14px;
			height: 40px;
			border-radius: 20px;
			border: 1px solid #373B44;
			font-family: AlibabaPuHuiTi_3_65_Medium;
			font-size: 16px;
			color: #0A0F1A;
			line-height: 16px;
			font-style: normal;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.login6 {
			font-family: AlibabaPuHuiTi_3_45_Light;
			font-size: 12px;
			color: #000000;
			line-height: 12px;
			text-align: center;
			font-style: normal;
			margin-top: 6px;
		}
	}
</style>